<template>
  <div class="recommend-wrapper">
    <div class="container">
      <h3 class="recommend"
          border-top-bottom-1px>{{title}}</h3>
      <ul class="shop-info">
        <router-link :to="'/detail/' + item.id"
                     v-for="(item, index) of recommend"
                     :key="index"
                     class="item"
                     tag="li">
          <common-product :shopInfo="item"
                          border-bottom-1px
                          @click="handleDetail(item)"></common-product>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
import CommonProduct from 'common/product/Product'
export default {
  name: 'HomeRecommend',
  components: {
    CommonProduct
  },
  data () {
    return {
      result: []
    }
  },
  props: {
    recommend: {
      type: Array
    },
    title: {
      type: String,
      default: '推荐商家'
    },
    page: {
      type: Boolean
    }
  },
  methods: {
    loadMore () {
      this.result = this.recommend
    },
    handleDetail (item) {
      this.$router.push({
        path: `/detail/${item.id}`
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.recommend-wrapper
  box-sizing border-box

  .recommend
    height 62px
    line-height 62px
    background-color $bgHomeTitle
    font-size $fzSecond
    color $fzColor
    text-align center
    box-sizing border-box
    font-weight normal

  .shop-info
    .item
      padding-top 24px
      box-sizing border-box

    .bottom
      height 38px
      background-color $bgHomeTitle
      color $grayFourthly
      font-size $smallFz
      text-align center
      line-height 38px
</style>
